<style>
.vuep-editor .CodeMirror, .vuep-preview .CodeMirror, .vuep-error .CodeMirror {
  display: none !important;
}

@import 'vuep.css';

</style>
<template>
  <el-dialog
    title="节点组件编写-Vuep"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="80%"
    :before-close="clearForm">
    <el-input v-model="pluginContext" type="textarea" :rows="4" placeholder="上下文数据"></el-input>

    <div id="app">
      <vuep class="hide-code" :template="code" :scope="this"></vuep>
    </div>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
  </span>
  </el-dialog>
</template>
<script>

// import 'vuep/dist/vuep.css'

export default {
  name: "buryingForm",
  filters: {},
  components: {},
  data() {
    return {
      pluginContext: '',
      dialogVisible: false,
      code: "<template>\n" +
        "  <div id=\"app\">\n" +
        "    <p style=\"color:red\"> {{ name }} </p>\n" +
        "    <p>Let's start your performance now~</p>\n" +
        "    <p>{{getRow().key}}</p>\n" +
        "  </div>\n" +
        "</template>\n" +
        "\n" +
        "<style scoped>\n" +
        "\n" +
        "</style>\n" +
        "\n" +
        "<script>\n" +
        "module.exports = {\n" +
        "  name: \"demo-code\",\n" +
        "  data() {\n" +
        "    return {\n" +
        "      name: 'BIC-Business inspection chart MVP Version'\n" +
        "    };\n" +
        "  },\n" +
        "  methods: {\n" +
        "    getRow() {\n" +
        "      let vm = this\n" +
        "      while (vm.$parent && !vm.$parent.pluginContext) {\n" +
        "        vm = vm.$parent\n" +
        "      }\n" +
        "      return vm.$parent.pluginContext\n" +
        "    }\n" +
        "  }\n" +
        "}\n" +
        "<\/script>",
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    load() {
      let vm = this
      vm.dialogVisible = true
    },
    clearForm() {
      let vm = this
      vm.dialogVisible = false
    },
  }
}
</script>
